import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Card, Typography, Button } from 'antd';

const { Title, Paragraph } = Typography;

const QuillPage: React.FC = () => {
  const [value, setValue] = useState('<p>这是 Quill 编辑器的初始内容。</p>');

  const handleGetContent = () => {
    console.log(value);
  };

  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      ['link', 'image'],
      ['clean']
    ],
  };

  const formats = [
    'header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>Quill 富文本编辑器</Title>
        <Paragraph>
          Quill 是一个现代化的富文本编辑器，具有模块化架构和强大的API。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <ReactQuill
            theme="snow"
            value={value}
            onChange={setValue}
            modules={modules}
            formats={formats}
            style={{ height: '300px', marginBottom: '50px' }}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default QuillPage;